﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Competencyform.aspx.cs" Inherits="Assesment.Web.Forms.Administration.Catalog.Competencyform" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>City Form</title>
    <style type="text/css">
        table.gridtable
        {
            font-family: verdana,arial,sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.gridtable th
        {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td
        {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
    <script src="<%= ResolveUrl("~/scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.validate.wrapper.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.inputmask.bundle.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.msgBox.v1.js") %>" type="text/javascript"></script>
    <script type="text/javascript">

        $("#btnSave").button({ icons: { primary: "ui-icon-disk"} });
        $("#btnClose").button({ icons: { primary: "ui-icon-close"} });

        $("#addLevel").button({ icons: { primary: "ui-icon-plus"} });

        $('#btnClose').click(function () {
            parent.$('#dialog').dialog("close");
        });
 
    </script>
    <script type="text/javascript">

        $(document).ready(function () {


            var comptid = $('#<%= hfID.ClientID %>').val();
            if (comptid != "") {
                loadLevel();
            }
            // 1. prepare the validation rules and messages.
            var rules = {
                ddlRowStatus: "required",
                txtDescription: {
                    required: true

                }
            };
            var messages = {
                ddlRowStatus: "Status wajib di isi",
                txtDescription: {
                    required: "Kompetensi  wajib di isi"
                }
            };

            $("#txtDescription").inputmask("Regex", { regex: "[A-Za-z-.0-9 ]*" });

            // 2. Initiate the validator
            var validator = new jQueryValidatorWrapper("form1", rules, messages);

            // 3. Set the click event to do the validation
            $("#btnSave").click(function () {

                if (!validator.validate())
                    return;

                var level = [];
                var definitionarea = [];
                var definitionarea2 = "";
                var newText = "";
                var counter = 1;
                $('#tbllevel tr').each(function () {
                    //level.push($('#txtLevel' + counter).val());
                    //definitionarea.push($('#txtAreaDef' + counter).val());
                    var datadefinition = $('textarea[name=txtAreaDef' + counter + ']').val();
                    definitionarea.push(datadefinition);


                    definitionarea2 += datadefinition + "|";

                    var datalevel = $('[name=txtLevel' + counter + ']').val();
                    level.push(datalevel);

                    counter++;
                });

                var deskripsi = $('#txtDescription').val();
                var definition = $('#txtDefinition').val();
                var status = $("#ddlRowStatus option:selected").val();
                var group = $("#ddlGroup option:selected").val();
                var id = $('#<%= hfID.ClientID %>').val();

                var objCompetency = new Object();
                objCompetency.ComptID = id;
                objCompetency.RowStatus = encodeURIComponent(status);
                objCompetency.CompetencyDesc = encodeURIComponent(deskripsi);
                objCompetency.Definition = encodeURIComponent(definition);
                objCompetency.DataDefinition = encodeURIComponent(definitionarea2);
                objCompetency.GroupCompetency = encodeURIComponent(group);
                jsonData = JSON.stringify(objCompetency);

                var handlerUrl = '<%= ResolveUrl("~/ajaxhandler/administration/catalog/Competencyhandler.ashx") %>';

                if (id == 0)
                    CallAjax(handlerUrl, "?method=insert&datalevel=" + level, jsonData);
                else {
                    CallAjax(handlerUrl, "?method=update&datalevel=" + level, jsonData);
                }

                parent.$('#dialog').dialog('close');

                setTimeout("parent.$('#table').trigger('reloadGrid');", 3000);

                return false;
            });


        });

        function loadLevel() {

            var comptid = $('#<%= hfID.ClientID %>').val();
            var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Loaddata/Administration/catalog/LevelCompetencyLoad.ashx?method=getlevelcomptid") %>';
            var counter = 1;
            $.ajax({
                type: 'GET',
                url: handlerUrl + "&comptID=" + comptid,
                contentType: 'application/json',
                dataType: 'json',
                success: function (datas) {


                    $.each(datas, function (i, data) {

                        // $('#trLevelAwal').remove();

                        var html = "";
                        //<td> <input type='button'  id='btnsimpan" + counter + " ' value='simpan' />
                        html = "<tr id='tr" + counter + "'><td>" + '<input type="text" name="txtLevel' + counter + '" id="txtLevel' + counter + '" value="' + data.Level + '" />' + "</td> <td>" + '<textarea rows="3" cols="100"  name="txtAreaDef' + counter + '" id="txtAreaDef' + counter + ' ">' + data.Definition + '</textarea>​​​​​​' + "</td> <td> <input type='button' id='btnhapus" + counter + "' onclick='hapusrow(" + counter + ")' value='hapus' /> </td> </tr>";
                        $("#tbllevel").append(html)
                        counter++;
                    });
                },
                error: function () {
                    alert('Error load level');
                }
            });

            return false;
        }
    
    </script>
    <script type="text/javascript">

        function ClearText() {
            $('#txtDescription').val('');
            $('#txtDefinition').val('');
        }
        
         
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#addLevel").click(function () {
                var counterText = 1;
                $('#tbllevel' + ' input[type=text]').each(function () {
                    counterText++;
                });

                html = "<tr id='tr" + counterText + "'><td>" + '<input type="text" name="txtLevel' + counterText + '" id="txtLevel' + counterText + '" value="" />' + "</td> <td>" + '<textarea rows="3" cols="100"  name="txtAreaDef' + counterText + '" id="txtAreaDef' + counterText + '" />' + "</td> <td> <input type='button' id='btnhapus" + counterText + "' onclick='hapusrow(" + counterText + ")' value='hapus' />  </td> </tr>";
                $("#tbllevel").append(html)
            });

          
        });

        function hapusrow(id) {
            $("#tr" + id).remove();
            return false;
        }
    </script>
</head>
<body onload="ClearText();">
    <form id="form1" runat="server">
    <table border="0">
        <tr runat="server" visible="false">
            <td style="width: 50">
                Status
            </td>
            <td>
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlRowStatus" runat="server" Width="300">
                    <asp:ListItem Text="Aktif" Value="1"></asp:ListItem>
                    <asp:ListItem Text="Tidak Aktif" Value="0"></asp:ListItem>
                </asp:DropDownList>
                &nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td style="width: 50">
                Group Kompetensi
            </td>
            <td>
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlGroup" runat="server" Width="300">
                    <asp:ListItem Text="Core Competency" Value="CP"></asp:ListItem>
                    <asp:ListItem Text="Managerial Competency" Value="MP"></asp:ListItem>
                </asp:DropDownList>
                &nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td>
                Kompetensi
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="txtDescription" runat="server" Width="200"></asp:TextBox>&nbsp;<span
                    style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td valign="top">
                Deskripsi
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:TextBox ID="txtDefinition" TextMode="MultiLine" Rows="4" runat="server" Width="500"></asp:TextBox>
            </td>
        </tr>
        
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
            <td>
                <asp:HiddenField ID="hfID" runat="server" />
            </td>
        </tr>
    </table>
    <div>
        <table class="gridtable" border="1" id="tbllevel" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <th align="center">
                    Level
                </th>
                <th align="center">
                    Definisi
                </th>
                <th>
                    &nbsp;
                </th>
            </tr>
            <%--<tr id="trLevelAwal">
                <td>
                    <input type='textbox' style="width: 30;" id='txtLevel1' />
                </td>
                <td>
                    <textarea id="txtAreaDef1" name="txtAreaDef1" rows="3" cols="100"></textarea>
                </td>
                <td>
                    
                    <input type="button" value='Hapus' onclick=' return hapusrow();' id='Button2'>
                </td>
            </tr>--%>
        </table>
    </div>
    <div>
        <button id="addLevel" type="button">
            Tambah Level</button>
        <%--  <input type="button" value='Tambah Level' id='addlevel2' />--%>
    </div>
    <div style="text-align: right; padding-top: 10px;">
        <button id="btnSave" type="button">
            Save</button>
        <button id="btnClose" type="button">
            Close</button>
    </div>
    </form>
</body>
</html>
